<template>
    <p>Home</p>
    <van-button type="primary">按钮</van-button>
    <p>组合式api写法</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>
    <p>reactive写法=========</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <p>arr:{{ arr }}</p>
    <p>arr[0]:{{ arr[0] }}</p>
    <p>computed</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>methods</p>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updataObj"> 更新obj</button>
    <p>组件</p>
    <Son :foo="obj.name" :age="obj.age"/>
</template>

<script>
import { ref,reactive,computed,watch } from 'vue'
import Son from 'Son.vue'
export default {
    components:{
      Son
    },
    setup() {
        const count = ref(0)
        const test = ref('hello wolrd')

        console.log(count.value);

        const obj = reactive({
            name: 'tom',
            age:12
        })
        const arr = reactive([0,1,2,4])

   console.log(obj.name);
   const countAddFive = computed(() =>{
    return count.value + 5
   })
   //method
   function countAddOne(){
           count.value++
   }
   const countAddTwo =()=>{
    count.value +=2
   }

    const updataObj = ()=>{
           updataObjName()
 }
           const updataObjName = ()=>{
           obj.name = 'jerry'

    }

    //watch
   
    watch(count,(newVal,oldVal)=>{
        console.log('count触发了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })
     watch(countAddFive,(newVal,oldVal)=>{
        console.log('countAddFive触发了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })
    watch(obj,(newVal,oldVal)=>{
        console.log('obj触发了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })
    watch(() =>obj.name,(newVal,oldVal)=>{
        console.log('obj.name触发了');
        console.log('newVal',newVal);
        console.log('oldVal',oldVal);
    })
   
        return {
            count,
            test,
            obj,
            arr,
            countAddFive,
            countAddOne,
            countAddTwo,
            updataObj
        }
    }
}
</script>